(function ($, undefined) {


    function find(arr, callback) {
        for (var i = 0; i < arr.length; i++) {
            if (callback(arr[i])) {
                return arr[i];
            }
        }
    }

    $.fn.frozenColumn = function (endColumnIndex) {
        if (!endColumnIndex) {
            throw 'exception: endColumnIndex must be more than or equal 0'
            return;
        }
        var $this = $(this)
        var $parentContainer = $(this).parent();
        var $frozenPanel = $("<div style='position:absolute;top:0;left:0' id='" + $this.attr('id') + "frozen-panel'></div>")
        $parentContainer.append($frozenPanel)
        var offset = $this.offset();
        var $clone = $this.clone();
        $clone.attr('id', $clone.attr('id') + 'clone')
        var ths = $this.find('thead>tr>th')
        var tableWidth = 0;
        var visibleWidth = 0;
        var cloneTrs = $clone.find('thead>tr>th');
        for (var i = 0; i < ths.length; i++) {
            tableWidth += $(ths[i]).width() + 2;
            if (i < endColumnIndex) {
                visibleWidth += $(ths[i]).width() + 2;
            }
        }
        tableWidth += 1;
        $clone.css({ 'width': tableWidth + 'px' });
        $frozenPanel.css({
            "top": (offset.top + 0) + "px",
            "left": (offset.left) + "px",
            "overflow": "hidden",
            "width": visibleWidth + "px"
        })
        $frozenPanel.append($clone);
    }
})(jQuery, undefined);